<template>
  <div class="aaa">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <div class="aaa">
          <img v-lazy="image" />
        </div>
      </van-swipe-item>
    </van-swipe>
    <div class="web_name">
      <h3>WEB大前端课程介绍</h3>
      <p>慧点讲师均拥有多年教学经验，打造了成熟高效的课程体系</p>
    </div>
    <div class="web_aa">
      <div class="web_explain">
        <div class="explain1">
          <img src="../../assets/h5_icon1.png" alt="" />
          <div class="text_content">网页+前后端</div>
        </div>
        <div class="explain2">
          <img src="../../assets/h5_icon2.png" alt="" />
          <div class="text_content">互联网解决方案</div>
          
        </div>
        <div class="explain3">
          <img src="../../assets/h5_icon3.png" alt="" />
          <div class="text_content">JS框架开发环境</div>
        </div>

        <div class="explain4">
          <img src="../../assets/h5_icon4.png" alt="" />
          <div class="text_content">微信开发课程</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);

Vue.use(Lazyload);
export default {
  data() {
    return {
      images: [
        "http://localhost:3000/h5_banner.jpg",
        "http://localhost:3000/ai_baner.jpg",
        "http://localhost:3000/java_banner.jpg",
        "http://localhost:3000/php_banner.jpg",
        "http://localhost:3000/python_banner.jpg",
        "http://localhost:3000/ui_banner.jpg",
      ],
    };
  },
};
</script>

<style scoped>
.van-swipe {
  width: 100%;
  height: 200px;
  /* padding: 3%; */
}

.van-swipe img {
  width: 100%;
  height: 200px;

  /* background-position: center; */
  /* background-size: cover; */
}
.van-swipe {
  background-color: #fff;
}
.web_name {
  width: 100%;
}
h3 {
  text-align: center;
}
.web_name p {
  font-size: 10px;
  text-align: center;
}
.web_aa {
  width: 100%;
}
.web_explain {
  width: 100%;
  height: 100px;
  display: flex;
  margin: 0px auto;
  background-color: #fff;
}
.explain1 {
  flex: 1;
  height: 100px;
  border: 1px solid beige;
  /* background-color: aqua; */
}
.explain1 img {
  width: 80px;
  height: 80px;
}
.explain2 {
  flex: 1;
  height: 100px;
  border: 1px solid beige;
  /* background-color: rgb(32, 39, 39); */
}
.explain2 img{
  width: 80px;
  height: 80px;
}
.explain3 {
  flex: 1;
  height: 100px;
  border: 1px solid beige;
  /* background-color: rgb(45, 175, 84); */
}
.explain3 img{
  width: 80px;
  height: 80px;
}
.explain4 {
  flex: 1;
  height: 100px;
  border: 1px solid beige;
  /* background-color: rgb(74, 41, 167); */
}
.explain4 img{
  width: 80px;
  height: 80px;
}
.text_content{
  font-size: 7px;
  /* transform: scale(0.7); */
}
</style>